<template>
  <view class="need">
    <view class="white-bg">
      <!-- 文本域 -->
      <view class="textarea-box">
        <view class="star">
          <image src="../../static/resort/need/star.png" class="need-star"></image>
          <image src="../../static/resort/need/blue-sound.png" class="need-sound" @click="soundShow = true"></image>
          <view class="textarea-sound">
            <view class="sound-left-tit">这个地方显示的是语音···</view>
            <view class="sound-right">
              <view class="sound-right-num">60"</view>
              <image src="../../static/resort/need/white-sound.png" mode=""></image>
            </view>
          </view>
          <!-- 语音输入弹出框 -->
          <view class="sound-popup">
            <u-popup :show="soundShow" @close="soundClose()" @open="soundOpen()" :round="20" mode="bottom">
              <view class="popup-top">
                <view class="popup-close" @click="soundShow = !true">
                  <image src="../../static/resort/need/block_close.png" mode=""></image>
                </view>
              </view>
              <view class="sound-bottom">
                <view class="bottom-con">
                  我是一名四川的乡村老师，我们这里生活条件恶劣,很多孩子吃不饱穿不暖。我个人希望···
                </view>
                <view class="ask-tit">
                  按住说话
                </view>
                <view class="ask-image">
                  <image src="../../static/resort/need/need-ask.png" mode=""></image>
                </view>
              </view>
            </u-popup>
          </view>
          <!-- 语音输入弹出框 -->
        </view>
        <view class="txt-content">
          <textarea class="textarea" placeholder="请输入具体描述..." placeholder-style="font-size:28rpx" maxlength="1000"
            @input="descInput" v-model="desc" />
        </view>
        <view class="need-num">
          <view class="new-new">{{ desc.length }}</view>
          <view class="all-num">/1000</view>
        </view>
      </view>
      <!-- 文本域 -->
      <!-- 上传视图 -->
      <view class="upload-image">
        <view class="upload-tit">上传视图</view>
        <view class="image-box">
          <u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" :maxCount="10" name="1" multiple
            class="image-item"></u-upload>
        </view>
      </view>
      <!-- 上传视图 -->
      <!-- 输入金额 -->
      <view class="input-money">
        <view class="star">
          <image src="../../static/resort/need/star.png" class="need-star"></image>
          <image src="../../static/resort/need/money.png" class="need-money"></image>
        </view>
        <view class="need-input">
          <input type="text" v-model="value" placeholder="请输入金额" class="input-one" />
        </view>
        <view class="need-picker">
          <view class="selector" @click="show=true">{{show1}}</view>
          <u-picker :show="show" :columns="columns" @confirm="confirm" @cancel="show=!show" title="单位"></u-picker>
          <view class="picker-select">
            <image src="../../static/resort/need/select.png" mode=""></image>
          </view>
        </view>
      </view>
      <!-- 输入金额 -->
      <!-- 需求类型 -->
      <view class="need-type">
        <view class="star">
          <image src="../../static/resort/need/star.png" class="need-star"></image>
          <view class="need-type-tit" @click="popupShow = true">
            需求类型
          </view>
        </view>
        <view class="need-type-radio">
          <u-radio-group v-model="radio" @change="radioGroupChange">
            <u-radio active-color="red" @change="radioChange" v-for="(item, index) in list" :key="index"
              :name="item.name" :disabled="item.disabled" class="radio-margin">
              {{item.name}}
            </u-radio>
          </u-radio-group>
          <!-- 需求类型弹出框 -->
          <view class="type-popup">
            <u-popup :show="popupShow" @close="popupClose()" @open="popupOpen()" :round="20" mode="center">
              <view class="popup-top">
                <view class="popup-white"></view>
                <view class="popup-tit">选择方式</view>
                <view class="popup-close" @click="popupShow = !true">
                  <image src="../../static/resort/need/block_close.png" mode=""></image>
                </view>
              </view>
              <view class="popup-bottom">
                <u-radio-group v-model="radio" @change="radioGroupChange">
                  <u-radio active-color="red" @change="radioChange" v-for="(item, index) in list" :key="index"
                    :name="item.name" :disabled="item.disabled" class="radio-margin">
                    {{item.name}}
                  </u-radio>
                </u-radio-group>
              </view>
            </u-popup>
          </view>
          <!-- 需求类型弹出框 -->
        </view>
      </view>
      <!-- 需求类型 -->
      <!-- 您的位置 -->
      <view class="map-box">
        <view class="need-map" @click="toaddlocation()">
          <view class="star">
            <image src="../../static/resort/need/star.png" class="need-star"></image>
            <view class="need-type-tit">
              您的位置
            </view>
          </view>
          <view class="need-map-item">
            <view class="map-image">
              <image src="../../static/resort/need/green-map.png" mode=""></image>
            </view>
            <view class="map-tit">
              武汉市·飞飞大排档
            </view>
          </view>
          <view class="more">
            <image src="../../static/resort/need/more.png" mode=""></image>
          </view>
        </view>
        <view class="address">
          <u-tag text="武汉市·飞飞大排档" bgColor="#FFFFFF" color="#FF2A31" borderColor="#FF2A31" shape="circle"></u-tag>
          <u-tag text="北京·全聚德烤鸭" bgColor="#F0F0F0" color="#646464" borderColor="#F0F0F0" shape="circle"></u-tag>
          <u-tag text="广州·广州塔" bgColor="#F0F0F0" color="#646464" borderColor="#F0F0F0" shape="circle"></u-tag>
        </view>
      </view>
      <!-- 您的位置 -->
      <!-- 标签 -->
      <view class="need-label" @click="labelShow=true">
        <view class="star">
          <view class="need-star"></view>
          <view class="need-type-tit">
            标签
          </view>
        </view>
        <!-- 标签弹出框 -->
        <view class="label-popup">
          <u-popup :show="labelShow" @close="labelClose()" @open="labelOpen()" :round="20" mode="bottom">
            <view class="popup-top">
              <view class="popup-close"></view>
              <view class="popup-tit">标签选择</view>
              <view class="popup-close" @click="labelShow = !true">
                <image src="../../static/resort/need/block_close.png" mode=""></image>
              </view>
            </view>
            <view class="label-con">
              <view class="label-search">
                <u-search v-model="labelSearchTit" :show-action="false"></u-search>
              </view>
              <!-- 行业 -->
              <view class="label-con-item">
                <view class="item-top">
                  <view class="label-image">
                    <image src="../../static/resort/need/industry.png" mode=""></image>
                  </view>
                  <view class="label-tit">行业</view>
                </view>
                <view class="item-bottom">
                  <view class="u-page__tag-item" v-for="(item, index) in industryRadios" :key="index">
                    <u-tag :text="item.tit" :plain="!item.checked" type="error" shape="circle" :name="index"
                      @click="industryClick">
                    </u-tag>
                  </view>
                </view>
              </view>
              <!-- 行业 -->
              <!-- 事件 -->
              <view class="label-con-item">
                <view class="item-top">
                  <view class="label-image">
                    <image src="../../static/resort/need/manage.png" mode=""></image>
                  </view>
                  <view class="label-tit">事件</view>
                </view>
                <view class="item-bottom">
                  <view class="u-page__tag-item" v-for="(item, index) in manageRadios" :key="index">
                    <u-tag :text="item.tit" :plain="!item.checked" type="error" shape="circle" :name="index"
                      @click="manageClick">
                    </u-tag>
                  </view>
                </view>
              </view>
              <!-- 事件 -->
              <!-- 物品 -->
              <view class="label-con-item">
                <view class="item-top">
                  <view class="label-image">
                    <image src="../../static/resort/need/article.png" mode=""></image>
                  </view>
                  <view class="label-tit">物品</view>
                </view>
                <view class="item-bottom">
                  <view class="u-page__tag-item" v-for="(item, index) in articleRadios" :key="index">
                    <u-tag :text="item.tit" :plain="!item.checked" type="error" shape="circle" :name="index"
                      @click="articleClick">
                    </u-tag>
                  </view>
                </view>
              </view>
              <!-- 物品 -->
              <!-- 优点 -->
              <view class="label-con-item">
                <view class="item-top">
                  <view class="label-image">
                    <image src="../../static/resort/need/characteristic.png" mode=""></image>
                  </view>
                  <view class="label-tit">优点</view>
                </view>
                <view class="item-bottom">
                  <view class="u-page__tag-item" v-for="(item, index) in meritRadios" :key="index">
                    <u-tag :text="item.tit" :plain="!item.checked" type="error" shape="circle" :name="index"
                      @click="meritClick">
                    </u-tag>
                  </view>
                </view>
              </view>
              <!-- 优点 -->
              <view class="label-txt">
                已选择标签：（3/4）自助餐、餐饮、地方小吃
              </view>
              <view class="label-button">
                <u-button type="error" :plain="true" text="自定义标签" size="small" class="u-button"
                  @click="labelShow = !true;modalShow = true"></u-button>
                <u-button type="error" text="确定" size="small" class="u-button" @click="labelShow = !true"></u-button>
              </view>
            </view>
          </u-popup>
          <!-- 模态框 -->
          <view class="popup-modal">
            <u-modal :show="modalShow" showCancelButton closeOnClickOverlay @confirm="modalConfirm"
              @cancel="modalCancel" @close="modalClose">
              <view class="modal-content">
                <view class="modal-tit">自定义标签</view>
                <view class="txt-content">
                  <textarea class="textarea" placeholder="请输入自定义标签(1个/1行)" placeholder-style="font-size:28rpx"
                    maxlength="100" @input="labelInput" v-model="labelModal" />
                  <view class="need-num">
                    <view class="new-new">{{ labelModal.length }}</view>
                    <view class="all-num">/6</view>
                  </view>
                </view>
                <view class="labels">
                  <u-tag text="数学" bgColor="#F0F0F0" color="#646464" borderColor="#F0F0F0" shape="circle"></u-tag>
                  <u-tag text="英语" bgColor="#F0F0F0" color="#646464" borderColor="#F0F0F0" shape="circle"></u-tag>
                  <u-tag text="外教" bgColor="#FFFFFF" color="#FF2A31" borderColor="#FF2A31" shape="circle"></u-tag>
                  <u-tag text="学前教育" bgColor="#F0F0F0" color="#646464" borderColor="#F0F0F0" shape="circle"></u-tag>
                </view>
              </view>
            </u-modal>
          </view>
          <!-- 模态框 -->
        </view>
        <!-- 标签弹出框 -->
        <view class="more">
          <image src="../../static/resort/need/more.png"></image>
        </view>
      </view>
      <!-- 标签 -->
    </view>
    <!-- 确定按钮 -->
    <view class="grey-bg">
      <view class="need-button" @click="toSuccess()">
        确定
      </view>
    </view>
    <!-- 确定按钮 -->
  </view>
</template>

<script>
  export default {
    data() {
      return {
        soundShow: false,
        desc: '',
        show: false,
        fileList1: [{
          url: '/static/resort/need/upload_picture.png'
        }, {
          url: '/static/resort/need/upload_picture.png'
        }],
        value: '',
        show1: "/个",
        columns: [
          ['/个', '/月', '/年', '/周', '/次']
        ],
        radio: '悬赏',
        list: [{
          name: '悬赏',
        }, {
          name: '筹款',
        }],
        popupShow: false,
        labelShow: false,
        labelSearchTit: '教育',
        industryRadios: [{
          tit: '建筑',
          checked: false
        }, {
          tit: '医疗',
          checked: false
        }, {
          tit: '餐饮',
          checked: true
        }, {
          tit: '生活用品',
          checked: false
        }, {
          tit: '医疗',
          checked: false
        }],
        manageRadios: [{
          tit: '直播',
          checked: false
        }, {
          tit: '运动',
          checked: false
        }, {
          tit: '露营',
          checked: true
        }, {
          tit: '体育健身',
          checked: false
        }, {
          tit: '冲浪',
          checked: false
        }],
        articleRadios: [{
          tit: '烧烤',
          checked: false
        }, {
          tit: '西餐',
          checked: false
        }, {
          tit: '餐饮',
          checked: false
        }, {
          tit: '自助餐',
          checked: true
        }, {
          tit: '火锅',
          checked: false
        }],
        meritRadios: [{
          tit: '服务',
          checked: false
        }, {
          tit: '特色',
          checked: false
        }, {
          tit: '环境',
          checked: false
        }, {
          tit: '性价比高',
          checked: true
        }, {
          tit: '轻奢',
          checked: false
        }],
        modalShow: false,
        labelModal: '',
      }
    },
    methods: {
      toaddlocation() {
        uni.navigateTo({
          url: "/pages/resort/addLocation"
        })
      },
      soundOpen() {
        console.log('soundOpen');
      },
      soundClose() {
        this.soundShow = false
        console.log('soundClose');
      },
      descInput(e) {
        console.log(e.detail.value.length, '输入的字数')
      },
      // 删除图片
      deletePic(event) {
        this[`fileList${event.name}`].splice(event.index, 1)
      },
      // 新增图片
      async afterRead(event) {
        // 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
        let lists = [].concat(event.file)
        let fileListLen = this[`fileList${event.name}`].length
        lists.map((item) => {
          this[`fileList${event.name}`].push({
            ...item,
            status: 'uploading',
            message: '上传中'
          })
        })
        for (let i = 0; i < lists.length; i++) {
          const result = await this.uploadFilePromise(lists[i].url)
          let item = this[`fileList${event.name}`][fileListLen]
          this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
            status: 'success',
            message: '',
            url: result
          }))
          fileListLen++
        }
      },
      uploadFilePromise(url) {
        return new Promise((resolve, reject) => {
          let a = uni.uploadFile({
            url: 'http://192.168.2.21:7001/upload', // 仅为示例，非真实的接口地址
            filePath: url,
            name: 'file',
            formData: {
              user: 'test'
            },
            success: (res) => {
              setTimeout(() => {
                resolve(res.data.data)
              }, 1000)
            }
          });
        })
      },
      confirm(e) {
        // console.log('confirm', e.value[0])
        this.show1 = e.value[0];
        this.show = false
      },
      // 选中某个单选框时，由radio时触发
      radioChange(e) {
        // console.log(e);
      },
      // 选中任一radio时，由radio-group触发
      radioGroupChange(e) {
        // console.log(e);
      },
      popupOpen() {
        console.log('popupOpen');
      },
      popupClose() {
        this.popupShow = false
        console.log('popupClose');
      },
      labelOpen() {
        console.log('labelOpen');
      },
      labelClose() {
        this.labelShow = false
        console.log('labelClose');
      },
      industryClick(name) {
        this.industryRadios.map((item, index) => {
          item.checked = index === name ? true : false
        })
      },
      manageClick(name) {
        this.manageRadios.map((item, index) => {
          item.checked = index === name ? true : false
        })
      },
      articleClick(name) {
        this.articleRadios.map((item, index) => {
          item.checked = index === name ? true : false
        })
      },
      meritClick(name) {
        this.meritRadios.map((item, index) => {
          item.checked = index === name ? true : false
        })
      },
      modalConfirm() {
        this.modalShow = false
        console.log('modalConfirm');
      },
      modalCancel() {
        this.modalShow = false
        console.log('modalCancel');
      },
      modalClose() {
        this.modalShow = false
        console.log('modalClose');
      },
      labelInput(e) {
        console.log(e.detail.value.length, '输入的字数')
      },
      toSuccess() {
        uni.navigateTo({
          url: "/pages/resort/pushNeedSuccess"
        })
      }
    }
  }
</script>

<style lang="scss">
  page {
    background-color: #F8F8F8;
  }

  .need {
    width: 100vw;

    .white-bg {
      background-color: #fff;

      // 文本域
      .textarea-box {
        width: 90vw;
        margin: 0 auto;
        border-top: 1px solid #FAFAFA;
        padding: 20rpx 0;

        .star {
          display: flex;
          align-items: center;

          .need-star {
            width: 20rpx;
            height: 20rpx;
            margin-right: 10rpx;
          }

          .need-sound {
            width: 42rpx;
            height: 42rpx;
          }

          .textarea-sound {
            height: 60rpx;
            line-height: 60rpx;
            display: flex;
            background-color: #FF696E;
            color: #fff;
            border-radius: 10rpx;
            padding: 0 10rpx;
            margin-left: 20rpx;

            .sound-left-tit {
              margin-right: 30rpx;
            }

            .sound-right {
              display: flex;
              align-items: center;

              image {
                width: 32rpx;
                height: 32rpx;
              }
            }
          }

          // 语音输入弹出框
          .sound-popup {
            .popup-top {
              display: flex;
              justify-content: flex-end;
              padding: 2vw 5vw;
              box-sizing: border-box;

              .popup-close {
                image {
                  width: 30rpx;
                  height: 30rpx;
                  vertical-align: middle;
                }
              }
            }

            .sound-bottom {
              .bottom-con {
                width: 80vw;
                margin: 0 auto;
                background-color: #FC666B;
                color: #fff;
                border-radius: 15rpx;
                padding: 5rpx;
                box-sizing: border-box;
                margin-bottom: 70rpx;
              }

              .ask-tit {
                text-align: center;
                font-size: 32rpx;
                color: #646464;
                margin-bottom: 5rpx;
              }

              .ask-image {
                text-align: center;
                margin-bottom: 34rpx;

                image {
                  width: 140rpx;
                  height: 140rpx;
                }
              }
            }
          }
        }

        .txt-content {
          margin-top: 20rpx;

          .textarea {
            width: 100%;
          }
        }

        .need-num {
          display: flex;
          justify-content: flex-end;

          .new-new {
            color: #72DBA4;
          }

          .all-num {
            color: #DCDCDC;
          }
        }
      }

      // 上传视图
      .upload-image {
        width: 90vw;
        margin: 0 auto;
        padding-top: 20rpx;
        border-top: 1px solid #FAFAFA;

        .upload-tit {
          font-size: 32rpx;
        }

        .image-box {
          padding: 20rpx 0;
        }
      }

      // 输入金额
      .input-money {
        width: 90vw;
        height: 80rpx;
        line-height: 80rpx;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        border-top: 1px solid #FAFAFA;
        padding: 20rpx 0;

        .star {
          display: flex;
          align-items: center;

          .need-star {
            width: 20rpx;
            height: 20rpx;
            margin-right: 10rpx;
          }

          .need-money {
            width: 42rpx;
            height: 42rpx;
          }
        }

        .need-input {
          width: 65vw;

          .input-one {
            height: 80rpx;
            line-height: 80rpx;
          }
        }

        .need-picker {
          display: flex;

          .selector {
            margin-right: 10rpx;
          }

          .picker-select {
            image {
              width: 20rpx;
              height: 15rpx;
            }
          }
        }
      }

      // 需求类型
      .need-type {
        width: 90vw;
        height: 80rpx;
        line-height: 80rpx;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        border-top: 1px solid #FAFAFA;
        padding: 20rpx 0;

        .star {
          display: flex;
          align-items: center;

          .need-star {
            width: 20rpx;
            height: 20rpx;
            margin-right: 10rpx;
          }

          .need-type-tit {
            font-size: 32rpx;
          }
        }

        .need-type-radio {
          width: 55vw;

          .radio-margin:first-child {
            margin-right: 120rpx;
          }

          // 需求类型弹出框
          .type-popup {
            .popup-top {
              width: 80vw;
              display: flex;
              justify-content: space-between;
              padding: 0 20rpx;

              .popup-close {
                image {
                  width: 20rpx;
                  height: 20rpx;
                }
              }
            }
          }
        }
      }

      // 您的位置
      .map-box {
        .need-map {
          width: 90vw;
          height: 80rpx;
          line-height: 80rpx;
          margin: 0 auto;
          display: flex;
          justify-content: space-between;
          border-top: 1px solid #FAFAFA;
          padding: 20rpx 0;

          .star {
            display: flex;
            align-items: center;

            .need-star {
              width: 20rpx;
              height: 20rpx;
              margin-right: 10rpx;
            }

            .need-type-tit {
              font-size: 32rpx;
            }
          }

          .need-map-item {
            width: 55vw;
            display: flex;

            .map-image {
              image {
                width: 30rpx;
                height: 30rpx;
                margin-right: 10rpx;
                vertical-align: middle;
              }
            }

            .map-tit {
              color: #07C160;
            }
          }

          .more {
            image {
              width: 30rpx;
              height: 30rpx;
              vertical-align: middle;
            }
          }
        }

        .address {
          width: 90vw;
          margin: 0 auto;
          display: flex;
          justify-content: space-between;
        }
      }

      // 标签
      .need-label {
        width: 90vw;
        height: 80rpx;
        line-height: 80rpx;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        padding: 20rpx 0;


        .star {
          display: flex;
          align-items: center;

          .need-star {
            width: 20rpx;
            height: 20rpx;
            margin-right: 10rpx;
          }

          .need-type-tit {
            font-size: 32rpx;
          }

        }

        .more {
          image {
            width: 30rpx;
            height: 30rpx;
            vertical-align: middle;
          }
        }

        // 标签弹出框
        .label-popup {
          .popup-top {
            width: 90vw;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;


            .popup-tit {
              font-size: 32rpx;
              margin-left: 10rpx;
            }

            .popup-close {
              image {
                width: 30rpx;
                height: 30rpx;
                vertical-align: middle;
              }
            }
          }

          .label-con {
            .label-search {
              width: 90vw;
              margin: 0 auto;
            }

            .label-con-item {
              .item-top {
                width: 90vw;
                margin: 0 auto;
                display: flex;

                .label-image {
                  image {
                    width: 40rpx;
                    height: 40rpx;
                    vertical-align: middle;
                    margin-right: 20rpx;
                  }
                }

                .label-tit {
                  font-size: 34rpx;
                }
              }

              .item-bottom {
                display: flex;
                justify-content: space-between;
                width: 85vw;
                margin: 0 auto;
              }
            }

            .label-txt {
              width: 90vw;
              margin: 0 auto;
              color: #B7B7B7;
            }

            .label-button {
              width: 85vw;
              margin: 0 auto;
              display: flex;
              justify-content: space-between;

              .u-button {
                width: 304rpx;
                margin: 20rpx 0;
              }
            }
          }

          // 模态框
          .popup-modal {
            .modal-content {
              .modal-tit {
                font-size: 32rpx;
                text-align: center;
              }

              .txt-content {
                width: 75vw;
                margin: 0 auto;
                height: 164rpx;
                background-color: #F5F5F5;
                padding: 10rpx;
                box-sizing: border-box;

                .textarea {
                  height: 90rpx;
                }

                .need-num {
                  display: flex;
                  justify-content: flex-end;

                  .new-new {
                    color: #72DBA4;
                  }

                  .all-num {
                    color: #DCDCDC;
                  }
                }
              }

              .labels {
                display: flex;
                justify-content: space-between;
                margin: 20rpx 0;
              }
            }
          }
        }
      }
    }

    // 确定按钮
    .grey-bg {
      padding: 30rpx 0;

      .need-button {
        width: 90vw;
        margin: 0rpx auto;
        height: 80rpx;
        line-height: 80rpx;
        background-color: #FF2A31;
        color: #fff;
        text-align: center;
        border-radius: 10rpx;
      }
    }
  }
</style>